var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var world;
var circleObjects = [];
var circleR = [];

// Factor to scale the range from [0.1 10] (box2d units)
// to [3 300] (in pixels)
var SCALE = 30;

function init()
{
    var b2Vec2 = Box2D.Common.Math.b2Vec2;
    var b2BodyDef = Box2D.Dynamics.b2BodyDef;
    var b2Body = Box2D.Dynamics.b2Body,
        b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
        b2Fixture = Box2D.Dynamics.b2Fixture,
        b2World = Box2D.Dynamics.b2World,
        b2MassData = Box2D.Collision.Shapes.b2MassData,
        b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
        b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
        b2DebugDraw = Box2D.Dynamics.b2DebugDraw;

    
    world = new b2World(new b2Vec2(0, 10), true);
    
    
    // Create ground
    //
    var fixDef = new b2FixtureDef;
    var bodyDef = new b2BodyDef;

    // Body Definition
    bodyDef.type = b2Body.b2_staticBody;
    // positions the center of the object (not upper left!)
    bodyDef.position.x = canvas.width / 2 / SCALE;
    bodyDef.position.y = (canvas.height / SCALE) - 1;

    // Fixture Definition
    fixDef.density = 1.0;
    fixDef.friction = 0.5;
    fixDef.restitution = 0.2;
    // Shape of the object
    fixDef.shape = new b2PolygonShape;

    // half width, half height. eg actual height here is 1 unit
    fixDef.shape.SetAsBox((canvas.width/SCALE) / 2, 0.5/2);

    world.CreateBody(bodyDef).CreateFixture(fixDef);


    // Create dynamic circle objects
    //
    for (var i = 0; i < 10; i++)
    {
        if (i % 2 === 0) bodyDef.type = b2Body.b2_dynamicBody;
        else bodyDef.type = b2Body.b2_staticBody;
        bodyDef.position.x = Math.random() * 25;
        bodyDef.position.y = Math.random() * 10;

        var radius = Math.random() + 0.1;
        fixDef.shape = new b2CircleShape(radius);

        var body = world.CreateBody(bodyDef);
        body.CreateFixture(fixDef);
        circleObjects.push(body);

        circleR.push(radius);
    }


    // Create dynamic polygon objects
    //
    for (var i = 0; i < 10; i++)
    {
        if (i % 2 === 0) bodyDef.type = b2Body.b2_dynamicBody;
        else bodyDef.type = b2Body.b2_staticBody;
        bodyDef.type = b2Body.b2_dynamicBody;
        bodyDef.position.x = Math.random() * 25;
        bodyDef.position.y = Math.random() * 10;

        fixDef.shape = new b2PolygonShape;
        fixDef.shape.SetAsBox(Math.random() + 0.1, //half width
        Math.random() + 0.1); //half height
        //world.CreateBody(bodyDef).CreateFixture(fixDef);
    }

    // Setup debug draw
    //
    var debugDraw = new b2DebugDraw();
    debugDraw.SetSprite(document.getElementById("c").getContext("2d"));
    debugDraw.SetDrawScale(SCALE);
    debugDraw.SetFillAlpha(0.3);
    debugDraw.SetLineThickness(1.0);
    debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
    world.SetDebugDraw(debugDraw);

    // restart
    //setTimeout(init, 3000);
}

function drawObjects()
{
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < circleObjects.length; i++)
    {
        var obj = circleObjects[i];
        var pos = obj.GetPosition();
        ctx.fillStyle = "red";
        ctx.beginPath();
        ctx.arc(pos.x * SCALE, pos.y * SCALE, circleR[i] * SCALE, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
    }
}

function update()
{
    world.Step(1/60, 10, 10);
        
    drawObjects();
    //world.DrawDebugData();
    world.ClearForces();
    requestAnimFrame(update);
}


window.requestAnimFrame = window.webkitRequestAnimationFrame;

init();
requestAnimFrame(update);
